<template>
  <div class="chart-container">
    <div ref="chart" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import request from '@/utils/request'
import vueStateMixin from "@/utils/vue-state-mixin";

export default {
  name: 'BarChart',
  mixins: [vueStateMixin],
  data() {
    return {
      chartData: []
    }
  },
  computed: {
    chartOption() {
      return {
        backgroundColor: 'rgba(0, 0, 0, 0)',
        // 折线颜色
        // color: this.getColor('chartSeriesColor', 'chartSeriesColor', '#FFFFFF'),
        grid: {
        //   top: this.getConfigValueByConfigIdIfDefault("grid-top", 7) + "%",
        //   right: this.getConfigValueByConfigIdIfDefault("grid-right", 0) + "%",
        //   bottom: this.getConfigValueByConfigIdIfDefault("grid-bottom", 7) + "%",
          left: '17%'
        },
        title: {
          text: '今日生产数量',
          // subtext: "单位（件）",
          x: 'left'
          // textStyle: {
          //   // 标题颜色
          //   color: this.getColor('titleColor', 'titleColor', '#FFFFFF'),
          //   fontSize: this.getConfigValueByConfigIdIfDefault('titleFontsize', 18),
          // },
          // subtextStyle: {
          //   // 子标题颜色
          //   color: this.getColor('subTitleColor', 'subTitleColor', '#FFFFFF'),
          //   fontSize: this.getConfigValueByConfigIdIfDefault('subTitleFontsize', 12),
          // },
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}生产数量：{c}'
        },
        xAxis: {
          data: this.chartData.map(d => d.x),
          axisLabel: {
            // interval: 0,
            rotate: 40
          },
          axisLine: {
            lineStyle: {
              // X轴颜色
              // color: this.getColor('chartAxisColor', 'chartAxisColor', '#FFFFFF'),
            }
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              // Y轴颜色
              // color: this.getColor('chartAxisColor', 'chartAxisColor', '#FFFFFF'),
            }
          },
          splitLine: {
            lineStyle: {
              // 网格线颜色
              // color: this.getColor('chartSplitLineColor', 'chartSplitLineColor', '#FFFFFF'),
            }
          }
        },
        series: [{
          // name: '销量',
          type: 'bar',
          // showSymbol: this.getConfigValueByConfigIdIfDefault("showSymbol", true),
          // smooth: this.getConfigValueByConfigIdIfDefault("smooth", false),
          data: this.chartData.map(d => d.y),
          areaStyle: {
            normal: {
              // color: new echarts.graphic.LinearGradient(
              //   0, 0, 0, 1,
              //   [
              //     this.getColor("areaStyleColor1", "borderColor1", "rgba(0, 0, 0, 0)"),
              //     this.getColor("areaStyleColor2", "borderColor2", "rgba(0, 0, 0, 0)"),
              //   ].filter(c => c != null).map((c, i) => ({offset: i, color: c}))
              // )
            }
          },
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                formatter(a, b, c, d) {
                  return a.value > 0 ? a.value : ''
                }
              }
            }
          }
        }]
      }
    }
  },
  watch: {
    chartOption: {
      immediate: true,
      deep: true,
      handler() {
        this.$nextTick(() => {
          if (this.$echarts == null) {
            this.$echarts = echarts.init(this.$refs['chart'], 'dark')
          }
          this.$echarts.setOption(this.chartOption)
        })
      }
    }
  },
  created() {
    this.loadChartData()
    setInterval(() => {
      if(this.pageActivate) {
        this.loadChartData()
      }
    }, 5000)

    window.addEventListener('resize', () => {
      if (this.$echarts != null) {
        this.$echarts.resize()
      }
    })
  },
  methods: {
    loadChartData() {
      request({
        url: '/api/datalog/statProductionCountByDevice'
      }).then(resp => {
        if (resp.success) {
          this.chartData = resp.data.sort((c1, c2) => c2.y - c1.y)
        } else {
          this.$message.error(resp.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  &>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
